<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>SnapShotControl: Options Wizard</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q" type="text/javascript"></script>
    <script type="text/javascript">
    document.write('<script type="text/javascript" src="../src/snapshotcontrol'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');
  </script>
    <script type="text/javascript">
    
    var snapShotControl = null;
    
    function initialize() {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(35.676148, 139.74479), 1);
        
        /*
        *  add control
        */
        var snapShotControlOptions = {hidden : true};
        snapShotControl = new SnapShotControl(snapShotControlOptions);
        map.addControl(snapShotControl);
        
        /*
        *  add maptype
        */
        var menuMapTypeControl = new GMenuMapTypeControl();
        map.addControl(menuMapTypeControl);
        map.addMapType(G_PHYSICAL_MAP);
        
        
        /*
        *  add line
        */
        var latlngs=[];
        latlngs.push(new GLatLng(35.676148, 139.74479));
        latlngs.push(new GLatLng(25.48295117535531, 118.30078125));
        latlngs.push(new GLatLng(-32.39851580247401, 135.17578125));
        latlngs.push(new GLatLng(37.43997405227057, -121.9921875));
        var line = new GPolyline(latlngs, "red", 10, 1);
        line.ssColor = "red";
        line.ssWeight = 10;
        line.ssOpacity = 1;
        map.addOverlay(line);
        
        
        /*
        *  add markers
        */
        for (var i = 0; i < latlngs.length; i++) {
          var marker = createMarker(latlngs[i]);
          if (i == 0) {
            marker.ssColor = "blue";
            marker.ssCharacter = "s";
          } else if (i == latlngs.length - 1) {
            marker.ssColor = "orange";
            marker.ssCharacter = "g";
          } else {
            marker.ssSize = "mid";
            marker.ssCharacter = "n";
          }
          map.addOverlay(marker);
        }

        
        /*
        *  add line
        */
        latlngs=[];
        latlngs.push(new GLatLng(35.676148, 139.74479));
        latlngs.push(new GLatLng(37.43997405227057, -121.9921875));
        line = new GPolyline(latlngs, "blue", 10, 1);
        line.ssColor = "blue";
        line.ssWeight = 10;
        line.ssOpacity = 1;
        map.addOverlay(line);
    }
    
    function createMarker(latlng){
      var marker = new GMarker(latlng);
      return marker;
    }
    
    function takeSnap(){
      //static map size
      var sizeStr = document.getElementById("mapSize").value;
      var imgSize = "";
      if (sizeStr != "") {
        var sizeArray = sizeStr.split("x");
        imgSize = new GSize(sizeArray[0], sizeArray[1]);
      }
      snapShotControl.setMapSize(imgSize);
      
      var mapType = document.getElementById("mapType").value;
      snapShotControl.setMapType(mapType);

      var mobile = false;
      if (document.getElementById("mobile").checked) {
        mobile = true;
      }
      snapShotControl.isMobile(mobile);

      var format = document.getElementById("imgFormat").value;
      snapShotControl.setFormat(format);

      var usePolyline = false;
      if (document.getElementById("polyencode").checked) {
        usePolyline = true;
      }
      snapShotControl.usePolylineEncode(usePolyline);

      var showpopup = false;
      if (document.getElementById("showpopup").checked) {
        snapShotControl.showPopup();
      } else {
        var url = snapShotControl.getImage();
        document.getElementById("snapshot_canvas").src = url;
        document.getElementById("snapshot_url").value = url;
      }
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <table>
      <tr>
        <td valign="top">
          <h3>Interactive Map:</h3>
          <div id="map_canvas" style="width: 400px; height: 400px"></div>
        </td>
        <td valign="top">
            <h3>Options:</h3>
            Size:<select id="mapSize">
              <option value="">Same map size</option>
              <option value="200x200">200 x 200</option>
              <option value="200x300">200 x 300</option>
              <option value="200x400">200 x 400</option>
              <option value="300x200">300 x 200</option>
              <option value="300x300">300 x 300</option>
              <option value="300x400">300 x 400</option>
              <option value="400x200">400 x 200</option>
              <option value="400x300">400 x 300</option>
              <option value="400x400">400 x 400</option>
              <option value="500x500">500 x 500</option>
              <option value="600x600">600 x 600</option>
              <option value="640x640">640 x 640</option>
            </select>
            <br>
            Map type:<select id="mapType">
              <option value="">autodetect</option>
              <option value="roadmap">roadmap</option>
              <option value="satellite">satellite</option>
              <option value="hybrid">hybrid</option>
              <option value="terrain">terrain</option>
            </select>
            <br> 
            Mobile(roadmap only):<input type="checkbox" id="mobile" value="true">
            <br> 
            Image format:<select id="imgFormat">
              <option value="gif">gif</option>
              <option value="jpg">jpeg</option>
              <option value="jpg-baseline">jpg-baseline</option>
              <option value="png8">png8</option>
              <option value="png32">png32</option>
            </select>
            <br> 
            Polyline encode:<input type="checkbox" id="polyencode" value="true">
            <br> 
            Show popup:<input type="checkbox" id="showpopup" value="true">
            <br> 
            <input type="button" onclick="javascript:takeSnap();" value="Make Static Map">
        </td>
      </tr>
      <tr>
        <td colspan="2"><h3>Static Map:</h3><hr size="1"></td>
      </tr>
      <tr>
        <td valign="top">
        <img id="snapshot_canvas" src="http://maps.google.com/intl/en_ALL/mapfiles/transparent.png" />
        </td>
        <td valign="top">
          <textarea cols="30" rows="10" id="snapshot_url"></textarea>
        </td>

      </tr>

    </table>
    <br>
  </body>
</html>
